<template>
  <div :class="prefixCls">
    <Card title="销售排行榜  (单位 :万册)" :bodyStyle="bodyStyle">
      <div :class="`${prefixCls}__content`">
        <List>
          <template v-for="(item, index) in topData" :key="index">
            <List.Item class="list flex items-center">
              <List.Item.Meta class="flex items-center lg:flex">
                <template #title>
                  <div class="flex items-center lg:flex">
                    <div class="lg:w-1/10 text-center">
                      <!-- <Icon class="icon" icon="ant-design:message-filled" v-if="index <= 2" /> -->
                       <img v-if="index <= 2" :src="index == 1 ? secondImg : index == 2 ? thirdImg : topImg" style="width: 20px;height: 20px;" />
                      <div v-else>{{ index+1 }}</div>
                    </div>
                    <div class="flex items-center lg:w-9/10">
                      <div class="lg:w-6/9">{{ item.title }}</div>
                      <div class="lg:w-2/9"> --------- </div>
                      <div class="lg:w-1/9">{{ item.count }}</div>
                    </div>
                  </div>
                </template>
              </List.Item.Meta>
            </List.Item>
          </template>
        </List>
      </div>
    </Card>
  </div>
</template>
<script lang="ts" setup>
  import { computed, defineComponent, ref, onMounted, } from 'vue';
  import { Card, List } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import topImg from '/@/assets/images/1.png';
  import secondImg from '/@/assets/images/2.png';
  import thirdImg from '/@/assets/images/3.png';
  import { saleTop10 } from '/@/api/sys/login';
  const bodyStyle = computed(() => {
    return {
      padding: '0 0',
    };
  });
  const topData = ref<Array<{ title: string; count: number }>>([
    {
      title: '订单待审核',
      count: 2,
    },
    {
      title: '订单已审核',
      count: 12,
    },
    {
      title: '周出库',
      count: 5,
    },
    {
      title: '待退货审核',
      count: 5,
    },
    {
      title: '待退货',
      count: 7,
    },
  ]);

  async function handleSaleTop10() {
    const res = await saleTop10();
    console.log(res);
    topData.value = res.map((item) => {
      return {
        title: item.bookName,
        count: item.salesNum,
      };
    });
  }
  handleSaleTop10();
  const prefixCls = 'list-basic';
  // import { BellOutlined } from '@ant-design/icons-vue';
  // // import { tabListData, ListItem, TabItem } from './Data';
  // import NoticeList from '/@/layouts/default/header/components/notify/NoticeList.vue';
  // import { useDesign } from '/@/hooks/web/useDesign';
  // import { useMessage } from '/@/hooks/web/useMessage';
  // import { Msg, msgPullPoolMsg, msgUnreadMsg } from '/@/api/msg/msg';
  // import { useI18n } from '/@/hooks/web/useI18n';
  // import { useGo } from '/@/hooks/web/usePage';
  // import { useFlashTitle } from '/@/hooks/web/useTitle';
  // import { useEmitter } from '/@/store/modules/user';
  // import { useUserStore } from '/@/store/modules/user';
  // import { publicPath } from '/@/utils/env';


  // export default defineComponent({
  //   components: { Popover, BellOutlined, Tabs, TabPane: Tabs.TabPane, Badge, NoticeList, Card },
  //   setup() {
  //     const { prefixCls } = useDesign('header-notify');
  //     const { createMessage, createConfirm } = useMessage();
  //     const open = ref<boolean>(false);
  //     const listData = ref(tabListData);
  //     const { t } = useI18n();
  //     const go = useGo();
  //     const emitter = useEmitter();

  //     const audioMessageSrc = publicPath + '/resource/msg/message.mp3';

  //     const flashTitle = useFlashTitle();

  //     const bodyStyle = computed(() => {
  //       return {
  //         padding: '0 0',
  //       };
  //     });

  //     const count = computed(() => {
  //       let count = 0;
  //       for (let i = 0; i < listData.value.length; i++) {
  //         const e = listData.value[i];
  //         count += e.count != undefined ? e.count : e.list.length;
  //       }
  //       return count;
  //     });

  //     const getMsgEnabled = computed(() => {
  //       const userStore = useUserStore();
  //       return userStore.getPageCacheByKey('msgEnabled', false);
  //     });

  //     onMounted(() => {
  //       if (getMsgEnabled.value) {
  //         unreadMsg();
  //         emitter.on('on-msg-notify-delete', (msg: Msg) => {
  //           listData.value[0].count = (listData.value[0].count || 1) - 1;
  //           listData.value[0].list.forEach((record) => {
  //             if (record.id == msg.id) {
  //               record.titleDelete = true;
  //             }
  //           });
  //         });
  //       }
  //     });

  //     function msgToListItem(msg: Msg): ListItem {
  //       const entity = msg.msgContentEntity || {};
  //       return {
  //         id: msg.id,
  //         avatar: 'ant-design:message-outlined',
  //         title: entity.title,
  //         description: entity.content,
  //         datetime: msg.sendDate,
  //         type: '1',
  //       };
  //     }

  //     async function unreadMsg() {
  //       let listCount = 0;
  //       const listItem: ListItem[] = [];
  //       const data = await msgUnreadMsg();
  //       if (!(data && data.result != 'login')) {
  //         return;
  //       }
  //       listCount = data.count || 0;
  //       const list = data.list || [];
  //       for (let i = 0; i < list.length; i++) {
  //         listItem.push(msgToListItem(list[i]));
  //       }
  //       listData.value = [
  //         {
  //           key: '1',
  //           name: t('sys.msg.title'),
  //           count: listCount,
  //           btnHref: '/msg/list',
  //           btnText: t('sys.msg.viewAllMsgButton'),
  //           list: listItem,
  //         },
  //       ];
  //       pullPoolMsg(); // 先执行一次
  //       if ((window as any).ppmInt) {
  //         clearInterval((window as any).ppmInt);
  //       }
  //       (window as any).ppmInt = setInterval(pullPoolMsg, 1000 * 60); // 1分钟执行一次
  //     }

  //     async function pullPoolMsg() {
  //       const data = await msgPullPoolMsg();
  //       if (!(data && data.result != 'login')) {
  //         if ((window as any).ppmInt) {
  //           clearInterval((window as any).ppmInt);
  //         }
  //         createConfirm({
  //           title: t('sys.api.errorTip'),
  //           content: t('sys.api.timeoutMessage'),
  //           iconType: 'info',
  //           onOk() {
  //             location.reload();
  //           },
  //         });
  //         return;
  //       }
  //       let list = (data || []) as any;
  //       const msgListData = listData.value[0];
  //       msgListData.count = msgListData.count + list.length;
  //       for (let i = 0; i < list.length; i++) {
  //         msgListData.list.unshift(msgToListItem(list[i]));
  //       }
  //       if (list.length != 0 && list.length > 5) {
  //         list = [
  //           {
  //             msgContentEntity: {
  //               title: t('sys.msg.mergeMsgTitle'),
  //               content: t('sys.msg.mergeMsgContent', [list.length]),
  //             },
  //             sendDate: '',
  //             sendUserName: '',
  //             id: '',
  //           },
  //         ];
  //       }
  //       for (let i = 0; i < list.length; i++) {
  //         const msg: Msg = list[0];
  //         const entity = msg.msgContentEntity || {};
  //         notification.open({
  //           message: entity.title,
  //           description: entity.content,
  //           placement: 'bottomRight',
  //           btn: () => {
  //             const btns: any = [];
  //             // TODO 根据业务需要，自行添加业务处理
  //             // if (isArray(entity.buttons)) {
  //             //   for (let btn of entity.buttons) {
  //             //     btns.push(
  //             //       h(
  //             //         Button,
  //             //         {
  //             //           type: 'primary',
  //             //           size: 'small',
  //             //           class: 'ml-2',
  //             //           onClick: () => {
  //             //             go(btn.herf);
  //             //             console.log(btn);
  //             //             notification.close(msg.id);
  //             //           },
  //             //         },
  //             //         { default: () => btn.name },
  //             //       ),
  //             //     );
  //             //   }
  //             // }
  //             btns.push(
  //               h(
  //                 Button,
  //                 {
  //                   type: 'primary',
  //                   size: 'small',
  //                   class: 'ml-2',
  //                   onClick: () => {
  //                     onNoticeClick({
  //                       id: msg.id,
  //                       avatar: 'ant-design:message-outlined',
  //                       title: entity.title,
  //                       description: entity.content,
  //                       datetime: msg.sendDate,
  //                       type: '1',
  //                     });
  //                     notification.close(msg.id);
  //                   },
  //                 },
  //                 { default: () => t('sys.msg.viewButton') },
  //               ),
  //             );
  //             return h('div', [btns]);
  //           },
  //           key: msg.id,
  //           duration: 60,
  //         });
  //         flashTitle();
  //       }
  //     }

  //     function onNoticeClick(record: ListItem) {
  //       open.value = false;
  //       const index = (record.type as unknown as number) - 1;
  //       if (index == 0) {
  //         go('/msg/view?id=' + record.id);
  //       } else {
  //         createMessage.success('你点击了消息');
  //       }
  //       // setTimeout(() => {
  //       //   listData.value[index].count = (listData.value[index].count || 1) - 1;
  //       //   record.titleDelete = true;
  //       // }, 600);
  //     }

  //     function onButtonClick(tabItem: TabItem) {
  //       go(tabItem.btnHref);
  //       open.value = false;
  //     }

  //     // return {
  //     //   prefixCls,
  //     //   open,
  //     //   listData,
  //     //   count,
  //     //   onNoticeClick,
  //     //   onButtonClick,
  //     //   numberStyle: {},
  //     //   audioMessageSrc,
  //     //   getMsgEnabled,
  //     //   t,
  //     //   bodyStyle
  //     // };
  //   },
  // });
</script>
<style lang="less">
  @prefix-cls: ~'jeesite-header-notify';

  .@{prefix-cls} {
    padding-top: 2px;

    &__overlay {
      max-width: 360px;

      .ant-popover-content {
        width: 300px;
      }
    }

    .ant-badge {
      font-size: 18px;

      .ant-badge {
        &-multiple-words {
          padding: 0 4px;
        }

        &-dot {
          top: -2px;
          right: 4px;
        }
      }

      svg {
        width: 0.9em;
      }
    }
  }
</style>
<style lang="less" scoped>
  .list-basic {
    &__content {
      background-color: @component-background;

      .list {
        position: relative;
        line-height: 40px;
        padding: 12px 5px;
      }

      .icon {
        font-size: 40px !important;
      }

      .extra {
        position: absolute;
        top: 20px;
        right: 15px;
        color: @primary-color;
        font-weight: normal;
        cursor: pointer;
      }

      .description {
        display: inline-block;
        width: 40%;
      }

      .info {
        display: inline-block;
        width: 30%;
        text-align: center;

        div {
          display: inline-block;
          padding: 0 20px;

          span {
            display: block;
          }
        }
      }

      .progress {
        display: inline-block;
        width: 15%;
        vertical-align: top;
      }
    }
  }
</style>
